<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.5/vue.min.js"></script>
    <style>
        .wraper {
            display: flex;
            justify-content: space-between;
            position: relative;
        }

        .item {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: black;
            z-index: 1;
        }


        .line {
            width: 100px;
            height: 100px;
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: red;
            transition: all 0.5s ease;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="wraper">
            <div class="item" ref="a" @click="click(1)">1</div>
            <div class="item" ref="b" @click="click(2)">2</div>
            <div class="item" ref="c" @click="click(3)">3</div>
            <div class="line" ref="line"></div>
        </div>
    </div>
</body>

<!-- 终点一定会到达的 -->
<script>


</script>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                value: '',//
                distance: '',
            }
        },
        methods: {
            click(e) {
                if (e == 1) {
                    this.distance = this.$refs.a.offsetLeft
                }
                if (e == 2) {
                    this.distance = this.$refs.b.offsetLeft
                }
                if (e == 3) {
                    this.distance = this.$refs.c.offsetLeft
                }
                this.$refs.line.style.left = this.distance + 'px'
            }
        }
    })

</script>

</html>